<template>
    <div v-if="showTop" class="top-back" @click="toTop">
        <img src="../assets/bianzu.png">
    </div>
</template>

<script>
import {debounce, toTop} from '../utils/util'
export default {
    name:'TopButton',
    data() {
        return {
            scrollTop: 0,
            showTop: false
        }
    },
    methods: {
        toTop(){
            toTop()
        },
        getScrollTop() {
            let that = this
            let scrollTop = document.documentElement.scrollTop;
            that.scrollTop = scrollTop;
            if (scrollTop > 100) {
                that.showTop = true;
            } else {
                that.showTop = false;
            }
        }
    },
    mounted() {
        this.getScrollTop
        window.addEventListener('scroll', debounce(this.getScrollTop))
    },
    beforeDestroy() {
        window.removeEventListener('scroll', debounce(this.getScrollTop))
    },
}
</script>

<style scoped>
.top-back {
    position: fixed;
    bottom: 150px;
    right: 50px;
    width: 66px;
    height: 66px;
    background: #000000;
    opacity: 0.3;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>